<template>
    <!-- 请查看个人信息 -->
    <div style="margin: 20px">

        <div class="form-group course" style="float: left">
            <div class="input-group">
                <h6>用户个人信息</h6>
                <h6 v-if="informData == ''" style="color:red;">*身份信息未认证</h6>
                <h6 v-if="informData == '-1'" style="color:red;">*身份信息已过期</h6>

                <ul>
                    <li>
                        <span>手机号</span>
                        <span>{{ theUserList.phone }}</span>
                    </li>
                    <li>
                        <span>账号</span>
                        <span>{{ theUserList.account }}</span>
                    </li>
                    <li>
                        <span>昵称</span>
                        <span>{{ theUserList.nickName }}</span>
                    </li>
                    <li>
                        <span>身份证到期日期</span>
                        <span>{{ theUserList.cardExpireDate }}</span>
                    </li>
                    <li v-if="theUserList.idCardFontUrl == null">
                        <span>用户身份证正面图</span>
                    </li>
                    <li v-else style="height: 50px;">
                        <span>用户身份证正面图</span>
                        <el-image style="width: 50px;" :src="imgFontUrl" :preview-src-list="[imgFontUrl]">
                        </el-image>
                        <!-- <span>{{ 'http://payment.itentbase.com/'+theUserList.idCardFontUrl }}</span> -->
                    </li>

                    <li v-if="theUserList.idCardBackUrl == null">
                        <span>用户身份证背面图</span>
                    </li>
                    <li v-else style="height: 50px;">
                        <span>用户身份证背面图</span>
                        <el-image style="width: 50px;" :src="imgBackUrl" :preview-src-list="[imgBackUrl]">
                        </el-image>
                        <!-- <span>{{ 'http://payment.itentbase.com/' + theUserList.idCardBackUrl }}</span> -->
                    </li>
                    <li>
                        <span>居住</span>
                        <span v-show="theUserList.province">{{ theUserList.province + '-' + theUserList.city + '-' +
                            theUserList.county
                        }}</span>
                    </li>
                    <li>
                        <span>详细地址（精确到门牌号）</span>
                        <span>{{ theUserList.address }}</span>
                    </li>
                    <li>
                        <span>邮箱地址</span>
                        <span>{{ theUserList.email }}</span>
                    </li>
                    <li>
                        <span>qq号码</span>
                        <span>{{ theUserList.qq }}</span>
                    </li>
                    <li>
                        <span>微信号码</span>
                        <span>{{ theUserList.wx }}</span>
                    </li>
                </ul>
            </div>

        </div>

        <div class="form-group course" style="float: right">

            <div class="input-group">
                <h6>其他信息</h6>
                <ul>
                    <li>
                        <span>学历</span>
                        <span>{{ theUserList.education }}</span>
                    </li>
                    <li>
                        <span>专业</span>
                        <span>{{ theUserList.major }}</span>
                    </li>
                    <li>
                        <span>毕业院校</span>
                        <span>{{ theUserList.school }}</span>
                    </li>
                    <li>
                        <span>工作状态</span>
                        <span>{{ theUserList.workingState }}</span>
                    </li>
                    <li>
                        <span>最近学习意向</span>
                        <span>{{ theUserList.intention }}</span>
                    </li>
                    <li>
                        <span>是否有驾照</span>
                        <span>{{ theUserList.drivingLicense }}</span>
                    </li>
                </ul>
            </div>
            <div class="input-group">
                <h6>紧急联系人信息</h6>
                <ul>
                    <li>
                        <span>紧急联系人关系</span>
                        <span>{{ theUserList.urgentRelation }}</span>
                    </li>
                    <li>
                        <span>紧急联系人姓名</span>
                        <span>{{ theUserList.urgentName }}</span>
                    </li>
                    <li>
                        <span>紧急联系人电话</span>
                        <span>{{ theUserList.urgentPhone }}</span>
                    </li>
                    <!-- <li>
                    <span>紧急联系人居住城市</span>
                    <span v-show="theUserList.urgentProvince">
                        {{ theUserList.urgentProvince }}+{{ theUserList.urgentCity }}+{{ theUserList.urgentCounty }}
                    </span>
                </li>
                <li>
                    <span>紧急联系人详细地址</span>
                    <span>{{ theUserList.urgentAddress }}</span>
                </li> -->

                    <!--<li>-->
                    <!--<span>修改时间</span>-->
                    <!--<span>{{ theUserList.updateTime }}</span>-->
                    <!--</li>-->
                    <!--<li>-->
                    <!--<span>上次登录时间</span>-->
                    <!--<span>{{ theUserList.lastLoginTime }}</span>-->
                    <!--</li>-->

                </ul>
            </div>
            <div class="input-group">
                <h6>注册日期</h6>
                <ul>
                    <li>
                        <span>注册日期</span>
                        <span>{{ theUserList.createTime }}</span>
                    </li>
                </ul>

            </div>
        </div>

    </div>
</template>

<script>
import { get_UserDetail, get_UserInformDate } from '../../api/public/api';

export default {
    name: 'UserDetail',
    data() {
        return {
            theUserList: {},
            informData: '',

            imgFontUrl: '',
            imgBackUrl: '',
            // url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',

        }
    },
    methods: {
        getData() {
            let _id = this.$route.query.id;

            // console.log('this.$route.query.id', this.$route.query.id);
            get_UserDetail(_id).then(res => {
                // console.log('res,res',res.data);
                if (res.data.code == 0) {

                    // res.data.data.map(item => {
                    //     const t = new Date(item.createTime)
                    //     const y = t.getFullYear()
                    //     const m = t.getMonth() + 1
                    //     const d = t.getDate()
                    //     // item.createTime = y + "-" + m + "-" + d
                    // })
                    res.data.data.map(item => {
                        if (item.cardExpireDate) {
                            const t = new Date(item.cardExpireDate)
                            const y = t.getFullYear()
                            const m = t.getMonth() + 1
                            const d = t.getDate()
                            item.cardExpireDate = y + "-" + m + "-" + d
                        }
                        if (item.createTime) {
                            const t = new Date(item.createTime)
                            const y = t.getFullYear()
                            const m = t.getMonth() + 1
                            const d = t.getDate()
                            item.createTime = y + "-" + m + "-" + d
                        }
                    })


                    this.theUserList = res.data.data[0]

                    // 这里的数据 不能动态绑定
                    this.imgFontUrl = 'http://payment-admin.itentbase.com' + this.theUserList.idCardFontUrl;
                    this.imgBackUrl = 'http://payment-admin.itentbase.com' + this.theUserList.idCardBackUrl;
                    // console.log('----', res.data.data);
                }


            })

        },
        getUserInformDate() {
            let _id = this.$route.query.id;
            get_UserInformDate(_id).then(res => {
                if (res.data.code == 0) {
                    this.informData = res.data.data;
                }

            }).catch(error => {
                this.$message.error(error)
            })
        }
    },
    created() {
        this.getData()
        this.getUserInformDate()

        // console.log('imgFontUrl',this.imgFontUrl);
    }

}
</script>

<style>
.course {
    width: 800px;
    /* margin: auto; */
}

.input-group {
    margin-top: 10px;
}

.course>.input-group {
    /* background-color: rgb(248, 248, 248) !important; */
    background-color: rgb(248, 248, 248);
    border-radius: 10px;
    padding: 10px;
    position: relative;
}

.course .input-group ul li {
    display: flex;
    justify-content: space-between;
}

.course .input-group ul li {
    width: 100%;
    border-bottom: 1px solid #f3f2f2 !important;
    height: 50px;
    line-height: 50px;
}
/*新加的样式*/
.input-group h6{
  background-color: #002a52;
  color: white;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
  .input-group li span:first-child{
    font-weight: bold;
    margin-left: 20px;
    font-size: 16px;
  }
.input-group li span:last-child {
  margin-right: 20px;
}
</style>
